<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

    <title>Choose Ad Category</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="author" content=""/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>

    <link rel="stylesheet" href="css/main.css"/>
    <link rel="Stylesheet" href="css/ui.selectmenu.css" type="text/css"/>

    <link href="favicon.ico" rel="shortcut icon"/>
    <link href="apple-icon.png" rel="apple-touch-icon"/>

    <script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/ui.selectmenu.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

</head>

<body>
<f:view>
    <f:loadBundle basename="ResourceBundle" var="bundle"/>
    <h:form id="chooseCategoryForm">
        <div class="android-wrap">
            <div id="wrapper">
                <div id="header">
                    <h1 class="title">Choose Ad Category</h1>
                    <ul class="app-controls">
                        <li>
                            <h:commandLink action="#{appBean.chooseCategoryFull}" value="Back" styleClass="appc-back"/>

                        </li>

                        <li>
                            <h:commandLink action="#{appBean.menu}" value="Home" styleClass="appc-home"/>
                        </li>
                    </ul>
                </div>
                <h:panelGroup rendered="#{appBean.categoriesNotChosen}">
                    <strong><h:outputText rendered="#{appBean.categoriesNotChosen}"
                                          style="color: #ffffff; font-size: x-large;"
                                          value="Please select at least one category!"/></strong>
                </h:panelGroup>
                <h:panelGroup rendered="#{!appBean.categoriesNotChosen}">
                    <div id="content"
                         style="overflow-y:scroll;scrollbar-arrow-color:black;position:absolute; height:350; width:270; word-wrap:break-word">
                        <ul class="category-list">

                            <h:panelGroup rendered="#{appBean.clickedCheckbox1}">
                                <li>
                                    Auto
                                    <h:commandLink actionListener="#{appBean.removeCheckBox1}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox2}">
                                <li>
                                    Restaurants
                                    <h:commandLink actionListener="#{appBean.removeCheckBox2}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox3}">
                                <li>
                                    Luxury
                                    <h:commandLink actionListener="#{appBean.removeCheckBox3}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox4}">
                                <li>
                                    Sport and fitness
                                    <h:commandLink actionListener="#{appBean.removeCheckBox4}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox5}">
                                <li>
                                    Loans and finance
                                    <h:commandLink actionListener="#{appBean.removeCheckBox5}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox6}">
                                <li>
                                    Realty
                                    <h:commandLink actionListener="#{appBean.removeCheckBox6}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox7}">
                                <li>
                                    Notary and
                                    legal services
                                    <h:commandLink actionListener="#{appBean.removeCheckBox7}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox8}">
                                <li>
                                    Jewelry
                                    <h:commandLink actionListener="#{appBean.removeCheckBox8}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox9}">
                                <li>
                                    Accessories
                                    <h:commandLink actionListener="#{appBean.removeCheckBox9}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox10}">
                                <li>
                                    Hotels and resorts
                                    <h:commandLink actionListener="#{appBean.removeCheckBox10}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox11}">
                                <li>
                                    Health care
                                    <h:commandLink actionListener="#{appBean.removeCheckBox11}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox12}">
                                <li>
                                    Medical services
                                    <h:commandLink actionListener="#{appBean.removeCheckBox12}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                            <h:panelGroup rendered="#{appBean.clickedCheckbox13}">
                                <li>
                                    High tech
                                    <h:commandLink actionListener="#{appBean.removeCheckBox13}" value="Remove category"
                                                   styleClass="cl-remove"/>
                                </li>
                            </h:panelGroup>

                        </ul>
                    </div>
                    <div id="control-panel">
                        <ul>
                            <li class="cp-btn addc-btn">
                                <h:commandLink action="#{appBean.chooseCategoryFull}" value="add category"
                                               styleClass="addc-btn"/>
                            </li>
                            <li class="cp-btn clear-btn">
                                <h:commandLink actionListener="#{appBean.uncheckAll}" value="clear all"
                                               styleClass="addc-btn"/>

                            </li>
                            <li class="cp-btn ok-btn">
                                <h:commandLink action="#{appBean.adViewing}" value="Ok" styleClass="ok-btn"/>
                            </li>
                        </ul>
                    </div>

                </h:panelGroup>
            </div>
            <h:commandLink action="#{appBean.chooseCategoryFull}" value="Back" styleClass="android-control back-btn"/>
        </div>
    </h:form>
</f:view>
</body>
</html>